<template>
  <section class="article-case" v-if="list.length">
    <h2 class="side-title font-mg font-normal">
      <slot>{{ title }}</slot>
    </h2>
    <ul class="case-list flex flex-wrap">
      <li class="case-item" v-for="item in list" :key="item.id">
        <a :href="item.home_url" target="_blank">
          <img :src="item.logo" />
          <p class="case-item-title font-m font-normal text-center flex-min line-1">
            {{ item.title }}
          </p>
        </a>
      </li> 
    </ul>
  </section>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

const props = defineProps({
  title: {
    type: String as any,
    default: '' as any
  },
  list: {
    type: Array as any,
    default: [] as any
  }
})

</script>

<style scoped>
@import '@/assets/css/newsAside.css';

.side-title {
  color: #000;
}
.case-item{
  margin-right:18px;
  width: 47%;
}
.case-item:nth-child(2n){
  margin-right:0px;
}
.case-item img {
  display: block;
  width: 200px;
  height: 113px;
  border-radius: 12px;
}

.case-item-title {
  line-height: 60px;
  color:#626675;
}
.case-item:hover .case-item-title{
  color:#ce2021;
}
</style>
